Tutoriel CSS3
Premiers pas avec CSS
Dans ce tutoriel, vous apprendrez à quel point il est facile d'ajouter des informations de style et de formatage aux pages Web à l'aide de CSS. Mais, avant de commencer, assurez-vous que vous avez des connaissances pratiques en HTML.
Si vous débutez dans le monde du développement Web, commencez à apprendre à partir d'ici »
Sans plus tarder, commençons avec les feuilles de style en cascade (CSS).
Inclure CSS dans les documents HTML
Le CSS peut être soit joint en tant que document séparé, soit intégré dans le document HTML lui-même. Il existe trois méthodes pour inclure CSS dans un document HTML :
- Styles en ligne — Utilisation de l'attribut style dans la balise d'ouverture HTML.
- Styles intégrés — Utilisation de l'élément <style> dans la section d'en-tête d'un document.
- Feuilles de style externes — Utilisation de l'élément <link>, pointant vers un fichier CSS externe.
Dans ce tutoriel, nous aborderons ces trois méthodes d'insertion de CSS une par une.
Remarque : Les styles en ligne ont la priorité la plus élevée et les feuilles de style externes la plus basse. Cela signifie que si vous spécifiez des styles pour un élément dans les feuilles de style intégrées et externes , les règles de style en conflit dans la feuille de style intégrée remplaceront la feuille de style externe.
Styles en ligne
Les styles en ligne sont utilisés pour appliquer les règles de style uniques à un élément en plaçant les règles CSS directement dans la balise de début. Il peut être attaché à un élément à l'aide de l'attribut style.
L'attribut style comprend une série de paires de propriété et de valeur CSS. Chaque paire "property: value" est séparée par un point-virgule ( ;), comme vous le feriez dans une feuille de style intégrée ou externe. Mais tout doit être sur une seule ligne, c'est-à-dire sans saut de ligne après le point-virgule, comme illustré ici :
<h1 style="color:red; font-size:40px;">Ceci est un titre</h1>
<p style="color:green; font-size:20px;">Ceci est un paragraphe.</p>
<div style="color:blue; font-size:14px;">Ceci est un bloc de texte.</div>
L'utilisation des styles en ligne est généralement considérée comme une mauvaise pratique. Comme les règles de style sont intégrées directement dans la balise HTML, la présentation se mélange au contenu du document ; ce qui rend le code difficile à maintenir et annule le but de l'utilisation de CSS.
Remarque : il est devenu impossible de styliser les pseudo-éléments et les pseudo-classes avec des styles en ligne. Vous devez donc éviter d'utiliser des attributs de style dans votre code. L'utilisation de feuilles de style externes est la méthode préférée pour ajouter des styles aux documents HTML.
Feuilles de style intégrées
Les feuilles de style intégrées ou internes n'affectent que le document dans lequel elles sont intégrées.
Les feuilles de style intégrées sont définies dans la section <head> d'un document HTML à l'aide de l'élément <style>. Vous pouvez définir n'importe quel nombre d'éléments <style> dans un document HTML mais ils doivent apparaître entre les balises <head> et </head>. Prenons un exemple :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Document</title>
<style>
body { background-color: yellow; }
p { color: #fff; }
</style>
</head>
<body>
<h1>Ceci est un tritre</h1>
<p>Un paragraphe avec du texte.</p>
</body>
</html>
Astuce : L'attribut type de la balise <style> et <link> (c'est-à-dire type="text/css") définit la langue de la feuille de style. Cet attribut est purement informatif. Vous pouvez l'omettre car CSS est le langage de feuille de style standard et par défaut dans HTML5.
Feuilles de style externes
Une feuille de style externe est idéale lorsque le style est appliqué à de nombreuses pages du site Web.
Une feuille de style externe contient toutes les règles de style dans un document séparé que vous pouvez lier à partir de n'importe quel fichier HTML de votre site. Les feuilles de style externes sont les plus flexibles car avec une feuille de style externe, vous pouvez modifier l'apparence de tout un site Web en modifiant un seul fichier.
Vous pouvez joindre des feuilles de style externes de deux manières : en liant et en important des fichiers .
Liaison de feuilles de style externes
Avant de créer un lien, nous devons d'abord créer une feuille de style. Ouvrons votre éditeur de code préféré et créons un nouveau fichier. Tapez maintenant le code CSS suivant dans ce fichier et enregistrez-le sous "style.css".
body {
background: lightyellow;
font: 14px Arial, sans-serif;
}
h1 {
color: green;
}
Une feuille de style externe peut être liée à un document HTML à l'aide de la balise <link>. La balise <link> va à l'intérieur de la section <head>, comme vous pouvez le voir dans l'exemple suivant :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Le titre de ma page</h1>
<p>Un paragraphe avec du text.</p>
</body>
</html>
Conseil : parmi les trois méthodes, l'utilisation d'une feuille de style externe est la meilleure méthode pour définir et appliquer des styles aux documents HTML. Comme vous pouvez le voir clairement avec les feuilles de style externes, le fichier HTML concerné nécessite des changements minimes dans le balisage.
Importation de feuilles de style externes
La règle @import est une autre façon de charger une feuille de style externe. L'instruction @import demande au navigateur de charger une feuille de style externe et d'utiliser ses styles.
Vous pouvez l'utiliser de deux manières. Le plus simple se trouve dans l'en-tête de votre document. Notez que d'autres règles CSS peuvent toujours être incluses dans l'élément <style>. Voici un exemple :
<style>
@import url("style.css");
p {
color: blue;
font-size: 14px;
}
</style>
De même, vous pouvez utiliser la règle @import pour importer une feuille de style dans une autre feuille de style.
@import url("css/layout.css");
@import url("css/color.css");
body {
color: blue;
font-size: 14px;
}
Remarque : Toutes les règles @import doivent apparaître au début de la feuille de style. Toute règle de style définie dans la feuille de style elle-même remplace les règles en conflit dans les feuilles de style importées. Cependant, l'importation d'une feuille de style dans une autre feuille de style n'est pas recommandée en raison d'un problème de performances.